<template>
	<view class="apps">
		<view class="plr30 f16 pt20 c333">我创建的</view>
		<view class="plr30 ptb20 mt10 flex fdc">
			<view class="boxsd flex aic ptb20 plr20 bgwhite bdr15">
				<view class="f1 flex fdc">
					<view class="pb20 f14 c333">邂后一只猫</view>
					<view class="flex c999 aic">
						<view class="mr30 flex ">
							<uv-icon name="https://lifeanclor.byyds.cn/static/images/family.png" color="#999" size="14"></uv-icon>
							<text class=" f12">房间 8</text>
						</view>
						<view class="mr30 flex ">
							<uv-icon name="https://lifeanclor.byyds.cn/static/images/engine.png" color="#999" size="14"></uv-icon>
							<text class=" f12">设备 5</text>
						</view>
						<view  class="mr30 flex ">
							<uv-icon name="https://lifeanclor.byyds.cn/static/images/user.png" color="#999" size="14"></uv-icon>
							<text class=" f12">人员 2</text>
						</view>
					</view>
				</view>
				<view class="w50">
					<view class="bgf1 boxsd bdr100 plr05 tb05">
						<uv-button shape="circle" text="邀请" customStyle="height:28px;font-weight:400;" customTextStyle="font-size:12px;color:#fff;font-weight:400" color="linear-gradient(180deg, #2688df, #65b3f3)"></uv-button>
					</view>
				</view>
			</view>
		</view>
		<uv-popup ref="familyPopup" bgColor="none">
			<view class="flex fdc w560 bdr20 boxsd bgf5 mh100 ptb20 plr20">
				<view class="f16 ptb20 plr30 c333 bdb1">家庭名称</view>
				<view class="ptb20 bdb1 plr30">
					<view class="bgwhite ptb20 plr20 bd100s boxsds bgimge2e7 plr05 ptb05">
						<uv-input shape="circle"  customStyle="font-weight:400;" border="none"  placeholder="请输入修改名称" >
							
						</uv-input>
					</view>
				</view>
				<view class="ptb20 plr30 flex">
					<view class="f1 plr10">
						<view class="bgf1 boxsd bdr100 plr05 tb05">
							<uv-button shape="circle" text="取消" customStyle="height:44px;font-weight:400" customTextStyle="color:#454545;font-weight:400" color="linear-gradient(180deg, #D7E0E8 0%, #F4F4F4 100%)"></uv-button>
						</view>
					</view>
					<view class="f1 plr10">
						<view class="bgf1 boxsd bdr100 plr05 tb05">
							<uv-button shape="circle" text="确认" customStyle="height:44px;font-weight:400" customTextStyle="color:#fff;font-weight:400" color="linear-gradient(180deg, #2688df, #65b3f3)"></uv-button>
						</view>
					</view>
				</view>
				
			</view>
		</uv-popup>
		<view class="fix" style="bottom:0;left:0;right:0;">
			<view class="mb30 flex plr30 fdc">
				<view class="w300">
					<view class="bgf1 boxsd bdr100 plr05 tb05" @click="familyShow">
						<uv-button icon="plus" iconSize="20" iconColor="#02A3F3" shape="circle" text="添加家庭" customStyle="height:44px;font-weight:400" customTextStyle="color:#02A3F3;font-weight:400" color="linear-gradient(180deg, #D7E0E8 0%, #F4F4F4 100%)"></uv-button>
					</view>
				</view>
			</view>
			<uv-safe-bottom></uv-safe-bottom>
		</view>
	</view>
</template>

<script setup>
	import { ref , reactive, nextTick, computed } from 'vue'
	import { onLoad, onShow, onHide } from '@dcloudio/uni-app'
	const tabActive=ref(0),
		  value=ref(""),
		  familyPopup = ref(null)
	
	const familyShow = ()=>{
		familyPopup.value.open();
	},tabIcon=()=>{
		if(suffixIcon.value =='eye'){
			suffixIcon.value='eye-off-outline'
			pwd.value = true
		}else{
			suffixIcon.value='eye'
			pwd.value=false
		}
	}
	
	onLoad(()=>{
		
	})
</script>

<style scoped>
	.apps{background-color: #f5f5f5 !important;}
</style>
